import './store-browser-card.less'
import {classnames, designPage, reactive, useRefs, watch} from "plain-design-composition";
import {PlDate} from "plain-design";
import React from "react";
import {MicroLibService} from "@/micro/utils/MicroLibService";
import {DataStatisticHead} from "../data-statistic-head";
import {zeroize} from 'plain-utils/string/zeroize'

const storeBrowserList = [
    {name: '徐盈路五十号店', count: '4,335'},
    {name: '汇金路三十一号店', count: '3,754'},
    {name: '赵巷十五号店', count: '3,346'},
    {name: '天河路一号店', count: '3,215'},
    {name: '公田路三号店', count: '3,024'},
    {name: '松青路七十一号店', count: '3,004'},
    {name: '玉田路一百零八号店', count: '2,856'},
]

export default designPage(() => {

    const {refs, onRef} = useRefs({chartEl: HTMLDivElement})

    const state = reactive({
        filterStart: null as any,
        filterEnd: null as any,
        currentFilterType: 2,
    })

    const filters = [
        {
            label: '今日',
            start: PlDate.today(),
            end: PlDate.today(),
            labels: new Array(24).fill(0).map((_, i) => `${zeroize(i)}:00`),
            range: [100, 300],
        },
        {
            label: '本周',
            start: PlDate.week.start(),
            end: PlDate.week.end(),
            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            range: [1000, 5000],
        },
        {
            label: '本月',
            start: PlDate.month.start(),
            end: PlDate.month.end(),
            labels: (() => {
                let lastDateOfYear = PlDate.today()
                return new Array(lastDateOfYear.daysInMonth()).fill(0).map((_, i) => `${i + 1}日`)
            })(),
            range: [20000, 100000],
        },
        {
            label: '全年',
            start: PlDate.year.start(),
            end: PlDate.year.end(),
            labels: new Array(12).fill(0).map((_, i) => `${zeroize(i + 1)}月`),
            range: [100000, 1000000],
        },
    ]

    async function updateCharts(labels: string[], ranges: [number, number]) {
        const [rangeStart, rangeEnd] = ranges
        const echarts = await MicroLibService.load.echarts()
        const ins = echarts.init(refs.chartEl!)

        const dataAxis = labels
        const data = labels.map(() => Math.ceil(Math.random() * rangeEnd - rangeStart) + rangeStart);

        const option = {
            grid: {
                top: '3%',
                left: `${String(rangeEnd).length}%`,
                right: '0%',
                bottom: '7%',
            },
            xAxis: {
                type: 'category',
                data: dataAxis,
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0,0,0,0.05)',
                    }
                },
            },
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: 'rgba(55, 162, 255)'},
                                {offset: 1, color: 'rgba(116, 21, 219)'}
                            ]
                        )
                    },
                    data: data
                }
            ]
        };
        ins.setOption(option)
    }

    async function setFilter(index: number) {
        const filter = filters[index]!
        state.filterStart = filter.start.format('YYYY-MM-DD')
        state.filterEnd = filter.end.format('YYYY-MM-DD')
        await updateCharts(filter.labels, filter.range as any)
    }

    watch(() => state.currentFilterType, async () => {
        setFilter(state.currentFilterType)
    }, {immediate: true})

    return () => (
        <div className="store-browser-card pro-data-statistic-summary-card">
            <div className="store-browser-card-wrapper">
                <DataStatisticHead icon={"el-icon-picture"} title="访问量">
                    {filters.map((i, index) => <span
                        onClick={() => state.currentFilterType = index}
                        className={
                            classnames([
                                'store-browser-filter-type',
                                {'pl-text-primary': index === state.currentFilterType}
                            ])
                        } key={i.label}>{i.label}</span>)}
                    <PlDate range v-model-start={state.filterStart} v-model-end={state.filterEnd} popperAttrs={{placement: 'bottom-end'}}/>
                </DataStatisticHead>
                <div className="store-browser-card-body">
                    <div className="store-browser-card-chart" ref={onRef.chartEl}/>
                    <div className="store-browser-card-store-list">
                        <h4>门店访问量排行</h4>
                        {storeBrowserList.map((item, index) => (
                            <div className="store-browser-card-store-item" key={index}>
                                <div>
                                    <div className="store-browser-card-store-item-rank">{index + 1}</div>
                                    <span>{item.name}</span>
                                </div>
                                <div>
                                    {item.count}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    )
})